<!--
 * @Description:
 * @version:
 * @Author: 陈捷
 * @Date: 2022-04-10 10:00:13
 * @LastEditors: 周子尧
 * @LastEditTime: 2022-04-11 09:35:00
-->
<template>
  <div>
    <HeaderNav />
    <div class="back-white">
      <van-form>
        <van-row>
          <van-col span="24">
            <div class="cardbody" style="margin: 10px">
              <van-field
                v-model="name"
                label="姓名"
                :rules="[{ required: true, message: '请填写姓名' }]"
              />
              <van-field
                v-model="cardNumber"
                label="身份证号"
                :rules="[{ required: true, message: '请填写身份证号码' }]"
                @touchstart.native.stop="showCardNumber = true"
                @focus="forbid"
              />
              <van-number-keyboard
                v-model="cardNumber"
                :show="showCardNumber"
                extra-key="X"
                close-button-text="完成"
                @blur="showCardNumber = false"
              />
              <van-field
                v-model="tel"
                name="手机号"
                label="手机号"
                :rules="[
                  { required: true, message: '请填写手机号' },
                  { pattern: /^1[3-9]\d{9}$/, message: '手机号格式错误' }
                ]"
              />
              <van-field v-model="address" name="家庭住址" label="家庭住址" />
              <van-field
                v-show="show"
                v-model="address"
                name="家庭住址"
                label="家庭住址"
              />

              <div class="more" @click="getmore">更多</div>
            </div>
          </van-col>
        </van-row>
        <div style="padding: 10px">
          <van-row gutter="10">
            <van-col span="12">
              <van-button
                round
                block
                type="info"
                @click="gopush('/Agreement')"
              >家医签约</van-button>
            </van-col>
            <van-col span="12">
              <van-button plain block round type="info">编辑档案</van-button>
            </van-col>
          </van-row>
        </div>
      </van-form>

      <NoData v-if="false" />
    </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';

import HeaderNav from '@/components/headerNav/index'
export default {
  name: 'IntentSigning',
  // import引入的组件需要注入到对象中才能使用
  components: {
    HeaderNav
  },
  data() {
    // 这里存放数据
    return {
      loading: false,
      name: '李飞雷', // 姓名
      tel: '13453467755', // 手机号
      address: '无锡市新吴区旺庄街道 长江北路200号23栋23室', // 家庭住址
      cardNumber: '320201199009092345', // 身份证号
      submiting: false,
      showCardNumber: false,
      show: false
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  async created() {
    // 加载布尔值成功 初始化数据接口判断在这
    await this.getData()
    this.today = new Date()
    this.loading = false
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    // window.sessionStorage.clear();
    // console.log(this.$route.query.title);
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周.期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
  // 方法集合
  methods: {
    getData() {
      // 拉取数据接口
    },
    forbid() {
      // 禁止软键盘弹出
      document.activeElement.blur()
    },
    // 更多
    getmore() {
      this.show = !this.show
    },
    gopush(path) {
      this.$router.push({ path })
    }
  } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="less" scoped>
/deep/ .van-hairline--bottom::after {
  display: none !important;
}
/deep/ .van-field__label {
  color: #9b9b9b !important;
}
/deep/ .van-field__control {
  color: #4a4a4a;
  font-size: 15px;
  font-weight: 550;
  font-family: PingFangSC-Medium, PingFang SC;
}
// /deep/ .van-button {
//   width: 300px;
//   height: 45px;
//   margin-right: 10px;
//   font-weight: 400;
// }
.more {
  text-align: center;

  height: 40px;
  line-height: 40px;
  font-size: 15px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 600;
  color: #4a90e2;
}
</style>
